<?php
	$root = "http://".$_SERVER['HTTP_HOST']."/".substr($_SERVER['PHP_SELF'], 1, strpos(substr($_SERVER['PHP_SELF'], 1), "/"))."/";
?>
<!DOCTYPE html>
<!-- 
文件用途:gis
作者:hjl
制作日期:2012-12-11
最后编辑人:hjl
最后编辑时间:2012-12-11
-->
<html lang="en">
  <head>
    <title>GIS</title>
    <base href="<?php echo $root;?>">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0"> 
    <?php include '../pages/common/importBaseCss.php'; ?>
	<?php include '../pages/common/importGisTemplate.php'; ?>
    <!-- bootstrap-modal -->
    <link rel="stylesheet" href="lib/bootstrap-modal/css/bootstrap-modal.css" />
	<script type="text/javascript">
	var aclData= {available:"true",read:"true",edit:"true",del:"true",add:"true",print:"true"}
	var breadCrumbDatas = [{"id":1,href:"index.jsp",clazz:'icon-home'},
			{id:2,text:'GIS安全监控系统',href:'pages/GisMonitoringSystem/index.jsp'},
			{id:3,text:'GIS监控系统'}
		   ];
	var mineGisDatas = [
		{mineNo:"100004013",mineName:"青坪煤矿",point:"104.376528|25.572588",label:"9|-20"},
        {mineNo:"100004012",mineName:"云乡煤矿",point:"104.391658|25.548",label:"9|-20"},
		{mineNo:"100007002",mineName:"祖德煤矿",point:"104.460221|25.509715",label:"9|-20"},
        {mineNo:"100007003",mineName:"兴济煤矿",point:"104.450221|25.483577",label:"-48|-17"},
        {mineNo:"100004019",mineName:"祥达煤矿",point:"104.2979|25.534619",label:"14|-20"},
        {mineNo:"100003015",mineName:"兴建煤矿",point:"104.25047|25.5484411",label:"2|-20"},
        {mineNo:"100003001",mineName:"江浪煤矿",point:"104.228626|25.538229",label:"-48|-17"},
		{mineNo:"100003007",mineName:"沿河煤矿",point:"104.201428|25.483577",label:"9|-20"},
        {mineNo:"100003008",mineName:"河兴煤矿",point:"104.160735|25.382529",label:"9|-20"}
     ];	   
	</script>
    </head>
    <body>
		<div id="loading_layer" style="display:none"><img src="img/ajax_loader.gif" alt="" /></div>
		<!-- style switcher -->
		<div class="style_switcher">
		</div>
		
		<div id="maincontainer" class="clearfix">
			<!-- header -->
            <header>
                <div class="navbar navbar-fixed-top">
                    <div class="navbar-inner">
                    </div>
                </div>
            </header>
            <!-- main content -->
            <div id="contentwrapper">
                <div class="main_content">
                    <!-- breadCrumb -->
                    <nav>
                        <div id="jCrumbs" class="breadCrumb module">
                        </div>
                    </nav>
                    <div class="row-fluid">
						<div class="span12">
							<h3 class="heading">GIS监控系统</h3>
							<p>
								注释:
								<span class="label label-success">绿色:正常</span>
								<span class="label label-color_yellow">黄色:一级报警</span>
								<span class="label label-warning">橙色:二级报警</span>
								<span class="label label-important">红色:三级报警</span>
								<span class="label">灰色:断线</span>
							</p>
							<div class="row-fluid">
								<div class="span8">
									<div class="well">
										<div id="g_map" style="width:100%;height:400px"></div>
									</div>
								</div>
								<div class="span4">
									<div class="row-fluid" id="g-map-top">
										<div class="span12">
											<h4 class="heading">矿点详情:</h4>
											<div class="location_info_div well" style="display: none">
												正在加载中...
											</div>
										</div>
									</div>
								</div>									
							</div>
						</div>
					</div>
					
					<!-- Modal -->
					<div id="kj_modal" class="modal container hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  						<div class="modal-header">
    						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    						<h3 id="myModalLabel"></h3>
  						</div>
  						<div class="modal-body">
							<table class="table table_vam mbox_table dTableR" id="dt_kj_list">
								<thead>
									<tr>
									<!-- 列表表头开始{ -->
                                        <th>序号</th>
                                        <th>id</th>
                                        <th>用户名</th>
                                        <th>密码</th>
                                        <th>工号</th>
                                        <th>信息</th>
                                        <th>年龄</th>
                                        <th>性别</th>	
                                        <th>Email</th>
                                        <th>电话</th>
                                        <th>博客</th>
                                     	<th>兴趣</th>
                                        <th>所在城市</th>
                                        <th>日期</th>
                                     <!-- }列表表头结束 -->   
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
  						</div>
					</div>
					
					<!-- Modal -->
					<div id="alarm_modal" class="modal container hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  						<div class="modal-header">
    						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    						<h3 id="myModalLabel"></h3>
  						</div>
  						<div class="modal-body">
							<table class="table table_vam mbox_table dTableR" id="dt_alarm_list">
								<thead>
									<tr>
									<!-- 列表表头开始{ -->
                                        <th>序号</th>
                                        <th>id</th>
                                        <th>用户名</th>
                                        <th>密码</th>
                                        <th>工号</th>
                                        <th>信息</th>
                                        <th>年龄</th>
                                        <th>性别</th>	
                                        <th>Email</th>
                                        <th>电话</th>
                                        <th>博客</th>
                                     	<th>兴趣</th>
                                        <th>所在城市</th>
                                        <th>日期</th>
                                     <!-- }列表表头结束 -->   
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
  						</div>
					</div>					
					
					<!-- hide elements -->
					<div class="hide">
					   
					</div>
					
                </div>
            </div>
            
			<!-- sidebar -->
            <a href="javascript:void(0)" class="sidebar_switch on_switch ttip_r" title="隐藏侧边栏">侧边栏</a>
            <div class="sidebar" id="sidebar">
			</div>
		</div>
		<?php include '../pages/common/importBaseJs.php'; ?>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
		<!-- bootstrap-modal -->
		<script src="lib/bootstrap-modal/js/bootstrap-modal.js"></script>
		<script src="lib/bootstrap-modal/js/bootstrap-modalmanager.js"></script>				
		<!-- comet -->
		<script src="lib/comet/jquery.comet.js"></script>
		<!-- jsound -->
		<script src="lib/jquery.jsound/jquery.jsound.js"></script>
		<!-- app.js 
		<script src="js/app/example/listbox.js"></script>
		-->
<script type="text/javascript">
	/*
	*文件用途:GIS展示
	*作者:hjl
	*制作日期:2012-12-11
	*最后编辑人:hjl
	*最后编辑时间:2012-12-11
	*/	
	//================
	//模块入口
	//================
    $(document).ready(function() {
    	if("undefined" != typeof aclData){
  			app.initMap();
  			app.initSound();
		}else{
			smoke.alert('对不起,权限信息丢失',{ok:"关闭"},function(e){
				window.location.href = "index.jsp";
			});
		}
    });
    app = {
    	//保存每页开始的记录数_iDisplayStart
        selfIDisplayStart: 0,
        //kjOtable
        kjOtable : null,
        //alarmOtable
        alarmOtable : null,
		//================
		//初始化地图
		//================           
    	initMap : function(){
    		window.map = new BMap.Map("g_map");
    		map.centerAndZoom(new BMap.Point(104.282939,25.531577),11);
    		map.enableScrollWheelZoom();
    		if("undefined" != typeof mineGisDatas){
    			window.addMarker(mineGisDatas);
    			app.comet();
    		}
		},
		//================
		//初始化报警声音
		//================  		
		initSound : function(){
			//$.sound.play("ALARM3.mp3");
			//$.sound.mute();
		},
		//================
		//创建Point
		//================   		
		createPoint : function(json){
			var p0 = json.point.split("|")[0];
    		var p1 = json.point.split("|")[1];
    		var point = new BMap.Point(p0,p1);
			return point;
		}, 
		//================
		//创建InfoWindow
		//================		    
		createInfoWindow : function(json){
			var templateFn = doT.template(document.getElementById('gisPopUpMenu-template').text);
	  		var infoContent = templateFn(json);
    		var iw = new BMap.InfoWindow(infoContent);
	  		iw.setWidth(400);
	  		iw.setHeight(160);
    		return iw;
		},
		//================
		//创建Marker属性
		//================			
		buildMarkerOption : function(data){		
			var imgeOffsetL,imgeOffsetT=0,title=":请点击",icon,option={};
			if(data.state==0){
				imgeOffsetL=0;
				title ="正常"+title;
			}else
			if(data.state==1){
				imgeOffsetL=-96;
				title ="一级报警"+title;
			}else
			if(data.state==2){
				imgeOffsetL=-31;
				title ="二级报警"+title;
			}else
			if(data.state==3){
				imgeOffsetL=-63;
				title ="三级报警"+title;
			}else
			if(data.state==4 || data.state==null){
				imgeOffsetL=-129;
				title ="断线"+title;
				data.state = 4;
			};
      		icon = new BMap.Icon("img/map-markers-small.png", new BMap.Size(30,35),{imageOffset: new BMap.Size(imgeOffsetL,imgeOffsetT),infoWindowAnchor:new BMap.Size(10,1),offset:new BMap.Size(6,35)})
      		option.title = title;
      		option.icon = icon;
      		option.mineNo = data.mineNo;
      		option.state = data.state;
      		return option;
		},
		//================
		//创建Lable属性
		//================			
		buildLableOption : function(data){
			var bgColor,color="white",title=":请点击",option={};
			if(data.state==0){
				bgColor="#2F9042";
				title ="正常"+title;
			}else
			if(data.state==1){
				bgColor="#EEEE00";
				color="#333";
				title ="一级报警"+title;
			}else
			if(data.state==2){
				bgColor="#FF9F25";
				title ="二级报警"+title;
			}else
			if(data.state==3){
				bgColor="#F13434";
				title ="三级报警"+title;
			}else
			if(data.state==4 || data.state==null){
				bgColor="#C2C2C2";
				color="#333";
				title ="断线"+title;
			};
			option.style ={
		  		backgroundColor:bgColor,
      			borderColor:"#808080",
      			color:color,
      			cursor:"pointer"
      		};
      		option.title = title;
      		return option;		
		},
		//================
		//创建Lable
		//================			
		createLable : function(data){
			var L0=data.label.split("|")[0];
			var L1=data.label.split("|")[1];
			var label = new BMap.Label(data.mineName,{"offset":new BMap.Size(L0,L1)});
			var option = app.buildLableOption(data);
			label.setStyle(option.style);
			label.setTitle(option.title);
			return label;
		},	
		//================
		//创建Icon
		//================			
		createIcon : function(json){
			var imgeOffsetL,imgeOffsetT=0;
			if(json.state==0){
				imgeOffsetL=0;
			}else
			if(json.state==1){
				imgeOffsetL=-96;
			}else
			if(json.state==2){
				imgeOffsetL=-31;
			}else
			if(json.state==3){
				imgeOffsetL=-63;
			}else
			if(json.state==4 || json.state==null){
				imgeOffsetL=-129;
			};
    		var icon = new BMap.Icon("img/map-markers-small.png", new BMap.Size(30,35),{imageOffset: new BMap.Size(imgeOffsetL,imgeOffsetT),infoWindowAnchor:new BMap.Size(10,1),offset:new BMap.Size(6,35)})
    		return icon;
		},
		//================
		//更新Marker
		//================			
		updateMarker : function(marker,data){
			var option = app.buildMarkerOption(data);
			marker.setIcon(option.icon);
			marker.setTitle(option.title);
			marker.state = option.state;
		},
		//================
		//更新Label
		//================		
		updateLabel : function(label,data){
			var option = app.buildLableOption(data);
			label.setStyle(option.style);
			label.setTitle(option.title);
		},
		//================
		//定时获取矿点状态
		//================		
		comet : function(){
			var mineNo,state;
    		$.comet.connect('json/gis/comet.json',{successTimeInterval:20000,
    			success:function(datas){
    				for(i in datas){
    					mineNo = datas[i].mineNo;
    					state = datas[i].state;
    					var markers = map.getOverlays();
    					for(j in markers){
    						//$.sound.mute();
    						//更改markers状态
    						if(markers[j].mineNo == mineNo && markers[j].state != state){
    							var label = markers[j].getLabel();
    							app.updateLabel(label,datas[i]);
    							app.updateMarker(markers[j],datas[i]);
    						}
    						//更改报警声音
    						if(markers[j].state == 1){
    							//$.sound.unmute();
    						}
    					}
    				}
    			}
    		});		
		},
		//================
		//查看矿点详细
		//================		
		detail : function(data){
			var postData = {};
			$(".location_info_div").show();
			postData.random = Math.random();
			postData.mineNo = data.mineNo;
			$.getJSON("json/gis/detailForAlarm.json",postData,function(msg){
            	var templateFn = doT.template(document.getElementById('locationInfoMenu-template').text);
            	msg.mineName = data.mineName;
            	var infoContent = templateFn(msg);
            	$(".location_info_div").html(infoContent);
			});
		},
		//================
		//关闭矿点详细
		//================		
		closeDetail : function(){
			$(".location_info_div").html("正在加载中...");
			$(".location_info_div").hide();
		},
		//================
		//alarm-dataTable
		//================
		alarmList: function(mineNo) {

            try{
             var tableList = $('#alarm_modal #dt_alarm_list');
             app.alarmOtable = tableList.dataTable({
				"oLanguage": {
					"sUrl": "js/config/datatables/cn_oLanguage.txt",
				},
				"sDom": "<'row'<'span6'<'dt_actions'>l><'span6'>r><'row'<'dt_searchs'>>t<'row'<'span6'i><'span6'p>>",
                "sPaginationType": "bootstrap",
                "iDisplayLength": 10,
                //"bStateSave": true,
                "aaSorting": [[3, "desc"],[4, "desc"]],
                "bServerSide": true,
				"bDestroy": true,
                "bProcessing": true,
                "sAjaxSource": "json/gis/list.json",
                "fnServerParams": function(aoData) {
              		aoData.push({ name: "mineNo", value: mineNo });
            	},
				"aoColumnDefs": [
                    { "mData": function ( source, type, val ) {return "";},	
      				  "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
      				  		$(nTd).addClass("nohref").text(app.selfIDisplayStart + iRow + 1);
                      },
					  "fnRender": function ( o ) {
                    		app.selfIDisplayStart = o.oSettings._iDisplayStart;
                      },
					  "bSortable": false,"aTargets": [0] 
					},			
					{ "mData": "id","bSearchable": false,"aTargets": [1],"bVisible": false},
					{ "mData": "username",
      				  "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
      				     	$(nTd).attr("msg_id",oData.id);
      				  		$(nTd).html("<a href='#tab_view'>"+sData+"</a>");
                       }, 
					  "sName": "username","aTargets": [2] 
					},
					{ "mData": "password","sName": "password","bSearchable": false,"aTargets": [3],"bVisible": false},
                    { "mData": "workno","sName": "workno","aTargets": [4] },
                    { "mData": "message","sName": "message","aTargets": [5],"bVisible": false},
                    { "mData": "age","sName": "age","aTargets": [6],"bVisible": false},
                    { "mData": "gender","sName": "gender","aTargets": [7],
                      "mRender": function ( data, type, full ) {
                      	if(data=="female"){
                      		return "女";
                      	}else
                      	if(data="male"){
                      		return "男";
                      	}
                      }
                    },
                    { "mData": "email","sName": "email","aTargets": [8]},
                    { "mData": "tel","sName": "tel","aTargets": [9]},
                    { "mData": "url","sName": "url", "aTargets": [10]},
                    { "mData": "interest","sName": "interest", "aTargets": [11],
                      "mRender": function ( data, type, full ) {
						var returnValue = [];
						for(index in data){
							if(data[index]=="sport"){
								returnValue[index]="运动";
							}else
							if(data[index]=="game"){
								returnValue[index]="游戏";
							}else
							if(data[index]=="movie"){
								returnValue[index]="电影";
							}else
							if(data[index]=="other"){
								returnValue[index]="其他";
							}
						}
						return returnValue;
                      }                    
                    },
                    { "mData": "locale","sName": "locale", "aTargets": [12]},
                    { "mData": "date","sName": "date", "aTargets": [13]}
				],
				"fnDrawCallback": function( oSettings ) {
    			}
            });
            }catch(eer){
					console.log(eer);
				}
        },		
		//================
		//kj-dataTable
		//================			
		kjList: function(mineNo) {

			try{
            var tableList = $('#kj_modal #dt_kj_list');
            //DataTable config
            app.kjOtable = tableList.dataTable({
				"oLanguage": {
					"sUrl": "js/config/datatables/cn_oLanguage.txt",
				},
				"sDom": "<'row'<'span6'<'dt_actions'>l><'span6'>r><'row'<'dt_searchs'>>t<'row'<'span6'i><'span6'p>>",
                "sPaginationType": "bootstrap",
                "iDisplayLength": 10,
                //"bStateSave": true,
                "aaSorting": [[3, "desc"],[4, "desc"]],
                "bServerSide": true,
				"bDestroy": true,
                "bProcessing": true,
                "sAjaxSource": "json/gis/list.json",
                "fnServerParams": function(aoData) {
              		aoData.push({ name: "mineNo", value: mineNo });
            	},
				"aoColumnDefs": [
                    { "mData": function ( source, type, val ) {return "";},	
      				  "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
      				  		$(nTd).addClass("nohref").text(app.selfIDisplayStart + iRow + 1);
                      },
					  "fnRender": function ( o ) {
                    		app.selfIDisplayStart = o.oSettings._iDisplayStart;
                      },
					  "bSortable": false,"aTargets": [0] 
					},			
					{ "mData": "id","bSearchable": false,"aTargets": [1],"bVisible": false},
					{ "mData": "username",
      				  "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
      				     	$(nTd).attr("msg_id",oData.id);
      				  		$(nTd).html("<a href='#tab_view'>"+sData+"</a>");
                       }, 
					  "sName": "username","aTargets": [2] 
					},
					{ "mData": "password","sName": "password","bSearchable": false,"aTargets": [3],"bVisible": false},
                    { "mData": "workno","sName": "workno","aTargets": [4] },
                    { "mData": "message","sName": "message","aTargets": [5],"bVisible": false},
                    { "mData": "age","sName": "age","aTargets": [6],"bVisible": false},
                    { "mData": "gender","sName": "gender","aTargets": [7],
                      "mRender": function ( data, type, full ) {
                      	if(data=="female"){
                      		return "女";
                      	}else
                      	if(data="male"){
                      		return "男";
                      	}
                      }
                    },
                    { "mData": "email","sName": "email","aTargets": [8]},
                    { "mData": "tel","sName": "tel","aTargets": [9]},
                    { "mData": "url","sName": "url", "aTargets": [10]},
                    { "mData": "interest","sName": "interest", "aTargets": [11],
                      "mRender": function ( data, type, full ) {
						var returnValue = [];
						for(index in data){
							if(data[index]=="sport"){
								returnValue[index]="运动";
							}else
							if(data[index]=="game"){
								returnValue[index]="游戏";
							}else
							if(data[index]=="movie"){
								returnValue[index]="电影";
							}else
							if(data[index]=="other"){
								returnValue[index]="其他";
							}
						}
						return returnValue;
                      }                    
                    },
                    { "mData": "locale","sName": "locale", "aTargets": [12]},
                    { "mData": "date","sName": "date", "aTargets": [13]}
				],
				"fnDrawCallback": function( oSettings ) {
    			}
            });
            }catch(eer){
					console.log(eer);
				}
        }
        
    };	
    
    //================
	//增加marker
	//================	
	window.addMarker = function (datas){
    	map.clearOverlays();
    	for(var i=0;i<datas.length;i++){
        	var data = datas[i];
        	var point = app.createPoint(data);
        	var iconImg = app.createIcon(data);
        	var label = app.createLable(data);
        	var option = app.buildMarkerOption(data);
			var marker = new BMap.Marker(point,{icon:option.icon});
        	marker.setTitle(option.title);
			marker.mineNo = option.mineNo;
			marker.state = option.state;
        	marker.setLabel(label);
        	map.addOverlay(marker);
        	(function(){
				var _data = data;
				var _iw = app.createInfoWindow(_data);
				var _marker = marker;
				var _label = label;					
				//marker绑定事件					
				_marker.addEventListener("click",function(){
					app.detail(_data);
    				this.openInfoWindow(_iw);
   				});
				//inforWindow绑定事件					
   				_iw.addEventListener("open",function(){
    				_marker.getLabel().hide();
   				});
   				_iw.addEventListener("close",function(){
    				_marker.getLabel().show();
    				app.closeDetail();
   				});
				//label绑定事件		 
				label.addEventListener("click",function(){
				    app.detail(_data);
    				_marker.openInfoWindow(_iw);
   				});
			})()
    	}
	};
	//================
	//打开KJ监控窗口
	//================
	window.showKjModal = function(mineName,mineNo){
	    app.kjList(mineNo);
	    $("#kj_modal #myModalLabel").text(mineName+"-K监控");
		$("#kj_modal").modal("show");
	};
    //================
	//打开人员定位窗口
	//================
	window.showPeopleModal = function(mineName,mineNo){
			try{
			          var oSettings = app.kjOtable.fnSettings();
          app.kjOtable.fnDraw(oSettings);
          	    $("#kj_modal #myModalLabel").text(mineName+"-人员定位");
		$("#kj_modal").modal("show");
		//alert(mineNo);
			}catch(eer){
				console.log(eer);
			}

	};
	//================
	//打开报警窗口
	//================
	window.showAlarmModal = function(mineName,mineNo){
		app.alarmList(mineNo);
		$("#alarm_modal #myModalLabel").text(mineName+"-报警数据");
		$("#alarm_modal").modal("show");
	};			
</script>
		<script src="js/gebo_common.js"></script>
	</body>
</html>